<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:insert="~{shared/header(Mytitle='注册')}" />
<body class="min-h-screen bg-gray-200">
  <nav th:replace="~{shared/nav}" />

  <div th:replace="~{shared/modal}" />

  <div class="flex-grow flex items-center justify-center h-screen">
    <div class="bg-white p-8 rounded shadow-md w-96">
      <h2 class="text-2xl font-bold mb-4">注册</h2>
      <form id="register">
        <div class="mb-4">
          <label for="account" class="block text-gray-700 text-sm font-bold mb-2">账户:</label>
          <input type="text" id="account" maxlength="20"
                 class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500">
          <span id="account-char-count" class="text-sm text-gray-500">0 / 20</span>
        </div>
        <div class="mb-4">
          <label for="name" class="block text-gray-700 text-sm font-bold mb-2">用户名:</label>
          <input type="text" id="name" maxlength="20"
                 class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500">
        </div>
        <div class="mb-4">
          <label for="password" class="block text-gray-700 text-sm font-bold mb-2">密码:</label>
          <input type="password" id="password" maxlength="15"
                 class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500">
          <span id="password-char-count" class="text-sm text-gray-500">0 / 15</span>
        </div>
        <div class="mb-4">
          <label for="repassword" class="block text-gray-700 text-sm font-bold mb-2">再次输入密码:</label>
          <input type="password" id="repassword" maxlength="15"
                 class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500">
          <span id="repassword-char-count" class="text-sm text-gray-500">0 / 15</span>
        </div>
        <button type="submit"
                class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue">
          注册
        </button>
      </form>
      <div class="mt-4">
        <p class="text-sm text-gray-600">已经有账户了？ <a href="/SS/login" class="text-blue-500">直接登录</a></p>
      </div>
    </div>
  </div>
  <footer th:replace="~{shared/footer}" />
</body>
</html>
<script th:inline="javascript">
    $('#register').submit(event => {
      event.preventDefault();
      const accountValue = $('#account').val().trim();
      const passwordValue = $('#password').val().trim();
      const repasswordValue = $('#repassword').val().trim();
      const nameValue = $('#name').val().trim()
      if(accountValue === '' || passwordValue === '' || repasswordValue === '') {
        showModal('错误', '账户和密码不能为空');
        addErrorClasses();
        return;
      }else if(passwordValue != repasswordValue) {
        showModal('错误', '两次密码不一致');
        addErrorClasses();
        return;
      }else if(nameValue === ''){
        showModal('错误','用户名不可为空')
      }
      $.ajax({
        type: 'POST',
        url: `${WebPrefix}/user/register`,
        data: {
          account: accountValue,
          password: passwordValue,
          repassword: repasswordValue,
          name: nameValue
        },
        success: function(response) {
          if(response.result){
            window.location.href = `${WebPrefix}/login`;
          }else{
            showModal('result',response.message)
          }
        },
        error: function(xhr, status, error) {
          console.error(error);
        }
      });
    })
    $('#account').on('input', handleInputWithLimit('account',20));
    $('#password').on('input', handleInputWithLimit('password',15));
    $('#repassword').on('input', handleInputWithLimit('repassword',15));
    $('#account').on('blur', event => removeErrorClasses(event));
    $('#password').on('blur', event => removeErrorClasses(event));
    $('#repassword').on('blur', event => removeErrorClasses(event));

    function handleInputWithLimit(elementId, maxLength) {
      const $element = $(`#${elementId}`);
      const $charCount = $(`#${elementId}-char-count`);

      $element.on('input', function(event) {
        const currentLength = $element.val().length;
        const remaining = maxLength - currentLength;

        $charCount.text(currentLength + ' / ' + maxLength);

        if (remaining < 0) {
          $element.val($element.val().substr(0, maxLength));
          $charCount.addClass('text-red-500');
        } else {
          $charCount.removeClass('text-red-500');
        }
      });
    }
    function removeErrorClasses(event) {
      $(event.target).removeClass('border-red-500');
    }
    function addErrorClasses() {
      $('#account').addClass('border-red-500');
      $('#password').addClass('border-red-500');
    }
</script>